<template>
  <view class="animate__animated animate__lightSpeedInLeft">
    <scroll-view v-if="token" scroll-y class="scroll-pt">
      <view class="list-pt">
        <view class="item-pr" v-for="(item, index) in videoList" :key="index">
          <view class="top-pr">
            <view class="tlt-pr">{{item.title}}</view>
            <view class="share-pr">
              <image class="img-pr" src="/static/player.png"></image>
            </view>
          </view>
          <view class="bot-pr">
            <video v-if="item.showVideo" class="video-pr" id="myVideo" :src="item.src" @error="videoErrorCallback"
              controls show-loading autoplay :poster="item.prc"></video>
            <view v-else class="video-pr flex-cnt bg-pt" :style="[{'background-image':'url('+item.prc+')'}]"
              @click="playVideo(index, item)">
              <image class="play-pr" src="/static/paly.png"></image>
            </view>
          </view>
        </view>
        <!--列表为空-->
        <view class="empty-pt" v-if="false">
          <image class="img-pt" src="/static/no-resources.png"></image>
        </view>
      </view>
    </scroll-view>
    <my-resources v-else></my-resources>
    <ad unit-id="adunit-7c5f6fc1ba2fd672" ad-type="video" ad-theme="white"></ad>
  </view>
</template>
<script>
  import timer from '@/mixins/token-timer.js'
  export default {
    mixins: [timer],
    data() {
      return {
        routename:"/pages/home/home",
        videoList: [{
          showVideo: false,
          title: '王欣宇-I lomo you ',
          prc: 'https://pic.imgdb.cn/item/63edfed0f144a0100732dcfd.png',
          src: 'http://2269442422.3vcn.work/wangxinyi/I%20lomo%20you.mp4',
        }, ]
      }
    },
    mounted() {

    },
    methods: {
      videoErrorCallback: function(e) {
        uni.showModal({
          content: e.target.errMsg,
          showCancel: false
        })
      },

      //播放视频
      playVideo(index, item) {
        //开始播放，本页面内播放
        // for (var i = 0; i < this.videoList.length; i++) {
        // 	this.videoList[i].showVideo = false;
        // }
        // this.videoList[index].showVideo = true;
        //其他页面播放
        console.log(222);
        uni.navigateTo({
          url: '/subpkg/goods-play/goods-play?item=' + encodeURIComponent(JSON.stringify(item))
        })
      },
    }
  }
</script>
<style lang="scss">
  .scroll-pt {
    // height: calc(100vh - var(--status-bar-height) - 45px - 45px);
  }

  .empty-pt {
    padding: 80rpx;
    text-align: center;

    .img-pt {
      width: 300rpx;
      height: 200rpx;
    }
  }

  .item-pr {
    padding: 20rpx;
    margin: 10rpx;
    border-radius: 45rpx;
    background-image: linear-gradient(160deg, #a200ff 20%, #cf3700 80%);
    overflow: hidden;

    .top-pr {
      display: flex;
      justify-content: center;
      color: #fff;
      // align-items: center;
      margin-bottom: 20rpx;

      .tlt-pr {
        font-size: 28rpx;
        font-weight: bold;
      }

      .share-pr {
        .img-pr {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .bot-pr {

      .video-pr {
        height: 400rpx;
      }

      .bg-pt {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 12px;
      }

      .flex-cnt {
        display: flex;
        justify-content: center;
        align-items: center;

      }

      .play-pr {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
</style>
